<template>
  <el-card style="margin: 20px 0 0 20px">
    <div>
      <el-input v-model="roleName" style="width: 180px;margin-right: 20px" placeholder="请输入用户名" />
      <el-button type="primary" icon="el-icon-search" size="small" @click="searchRole">查询</el-button>
      <el-button style="color: black" type="info" size="small" icon="el-icon-delete" @click="removeInput">清空</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-button type="primary" @click="isRoleDialog">添加</el-button>
      <el-button type="info" style="background-color: pink;border-color: pink" @click="openAll">批量删除</el-button>
    </div>
    <!-- 表单数据 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      border
      :data="roleList"
      stripe
      tooltip-effect="dark"
      style="width: 80%;margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="序号"
        type="index"
        width="80"
      />
      <el-table-column
        label="id"
        prop="id"
        width="80"
      />
      <el-table-column
        prop="roleName"
        label="角色名称"
      >
        <template #default="{$index,row}">
          <el-input v-if="row.id === lineIdx" v-model="role.roleName"></el-input>
          <el-button v-if="row.id === lineIdx" @click="cancelAdd" type="warning" size="mini" icon="el-icon-refresh">取消</el-button>
          <el-button v-if="row.id === lineIdx" @click="addRoleItem" type="warning" size="mini" icon="el-icon-check">确定</el-button>
          <span v-else>{{row.roleName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="240"
      >
        <template #default="{row}">
          <el-button @click="toRoleAuth(row)" title="分配权限" size="small" type="info" icon="el-icon-info" />
          <el-button title="更新角色" size="small" type="primary" icon="el-icon-check" @click="getRoleItemInfo(row)" />
          <el-button title="修改角色" size="small" type="primary" icon="el-icon-edit-outline" @click="updateRoleInfo(row)" />
          <el-button title="删除角色" size="small" type="danger" icon="el-icon-delete" @click="openItem(row)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 10px"
      :pager-count="5"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @current-change="changePage"
      @size-change="changeLimit"
    />
    <!-- 添加角色 -->
    <el-dialog
      title="添加角色"
      :visible.sync="addDialogVisible"
      width="30%"
      style="height: 60%"
    >
      <div style="margin-top: -30px">
        <h3>请输入新名称</h3>
        <el-input ref="addInput" v-model="role.roleName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddRoleItem">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqAddRoleItemAsync,
  reqDeleteRoleItemAsync,
  reqDeleteRoleListAsync,
  reqRoleListAsync, reqUpdateRoleItemAsync
} from '@/api/role'

export default {
  name: 'Role',
  data() {
    return {
      page: 1, // 初始页数
      limit: 5, // 初始每页条数
      total: 10, // 初始总条数
      roleList: [], // 角色信息数据
      roleName: '', // 角色名称
      multipleSelection: [], // 收集选中的角色数据的id
      loading: false, // 控制数据是否加载中
      addDialogVisible: false, // 控制添加角色的对话框显示隐藏
      role: { // 收集添加角色需要的信息
        roleName: '' // 角色名称
      },
      addInput: {}, // addInput的组件对象
      lineIdx: -1 // 可以显示的添加的input对应的row的id
    }
  },
  mounted() {
    // 初始化获取角色数据
    this.getRoleList()
  },
  methods: {
    // 获取分页下的所有角色信息
    async getRoleList() {
      try {
        // 开始加载中
        this.loading = true
        const result = await reqRoleListAsync(this.page, this.limit, this.roleName)
        this.roleList = result.data.items
        this.total = result.data.total
        // 关闭加载中
        this.loading = false
      } catch (e) {
        this.$message.error('获取角色信息失败')
        // 关闭加载中
        this.loading = false
      }
    },
    // 页码的改变
    changePage(currentPage) {
      this.page = currentPage
      // 开始加载中
      this.loading = true
      // 更新平台用户数据
      this.getRoleList()
      // 关闭加载中
      this.loading = false
    },
    // 每页条数的改变
    changeLimit(currentLimit) {
      this.limit = currentLimit
      // 开始加载中
      this.loading = true
      // 更新平台用户数据
      this.getRoleList()
      // 关闭加载中
      this.loading = false
    },
    // 根据角色名查询对应角色数据
    searchRole() {
      // 更新数据
      this.getRoleList()
    },
    // 清空查询输入框
    removeInput() {
      this.roleName = ''
      // 开始加载中
      this.loading = true
      // 更新平台用户数据
      this.getRoleList()
      // 关闭加载中
      this.loading = false
    },
    // 批量删除
    openAll() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          // 开始加载中
          this.loading = true
          await reqDeleteRoleListAsync(this.multipleSelection)
          // 更新数据
          await this.getRoleList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 关闭加载中
          this.loading = false
        } catch (e) {
          this.$message.error('删除多个失败')
          // 关闭加载中
          this.loading = false
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 监听选中的角色数据
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id)
    },
    // 单个删除
    openItem(row) {
      this.$confirm(`确定删除${row.roleName}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          // 开始加载中
          this.loading = true
          await reqDeleteRoleItemAsync(row.id)
          // 更新数据
          await this.getRoleList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 关闭加载中
          this.loading = false
        } catch (e) {
          this.$message.error('删除失败')
          // 关闭加载中
          this.loading = false
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 更新角色信息
    async getRoleItemInfo() {
      try {
        // 开始加载中
        this.loading = true
        await reqUpdateRoleItemAsync(this.role)
        this.$message.success('更新成功')
        // 文本模式
        this.lineIdx = -1
        // 更新数据
        await this.getRoleList()
        // 关闭加载中
        this.loading = false
      } catch (e) {
        this.$message.error('更新失败')
        // 文本模式
        this.lineIdx = -1
        // 关闭加载中
        this.loading = false
      }
    },
    // 开始添加角色对话框
    async isRoleDialog() {
      // 开始对话框
      this.addDialogVisible = true
      // 获取输入框的焦点
      this.$nextTick(() => {
        this.$refs['addInput'].focus()
      })
    },
    // 添加角色
    async addRole() {
      try {
        // 开始加载中
        this.loading = true
        await reqAddRoleItemAsync(this.role)
        this.$message.success('添加角色成功')
        // 请空输入框内容
        this.role = {
          roleName: ''
        }
        // 更新数据
        await this.getRoleList()
        // 关闭加载中
        this.loading = false
      } catch (e) {
        this.$message.error('添加角色失败')
        // 关闭加载中
        this.loading = false
      }
      // 关闭对话框
      this.addDialogVisible = false
    },
    // 取消添加
    cancelAddRoleItem() {
      this.$message({
        type: 'warning',
        message: '取消添加'
      })
      // 关闭对话框
      this.addDialogVisible = false
    },
    // 显示为编辑模式
    updateRoleInfo(row) {
      // 保存成为 编辑模式的角色的 id
      this.lineIdx = row.id
      // 保存编辑模式的角色的 名称
      this.role = { ...row }
    },
    // 取消修改角色信息
    cancelAdd() {
      // 文本模式
      this.lineIdx = -1
      // 清除数据
      this.role = {
        roleName: ''
      }
    },
    // 修改功能
    async addRoleItem() {
      try {
        // 开始加载中
        this.loading = true
        await reqUpdateRoleItemAsync(this.role)
        this.$message.success('修改成功')
        // 文本模式
        this.lineIdx = -1
        // 更新数据
        await this.getRoleList()
        // 关闭加载中
        this.loading = false
      } catch (e) {
        this.$message.error('修改失败')
        // 文本模式
        this.lineIdx = -1
        // 关闭加载中
        this.loading = false
      }
    },
    // 跳转到分配权限页
    toRoleAuth(row) {
      this.$router.push({
        path: `/acl/role/auth?id=${row.id}&roleName=${row.roleName}`
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
